<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Loading…</title>
        <style>
            html,
            body {
                height: 100%;
                margin: 0;
                font-family: "Inter", "Segoe UI", Roboto, sans-serif;
            }

            #nuxt-spa-loading {
                position: fixed;
                inset: 0;
                width: 100%;
                height: 100dvh;
                display: flex;
                background: #f8f9fa;
                align-items: center;
                justify-content: center;
                z-index: 999999;
            }

            @media (prefers-color-scheme: dark) {
                #nuxt-spa-loading {
                    color: #ddd;
                    background-color: #121212;
                }
                code {
                    background-color: #333;
                }
            }

            .loader-box {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 24px;
            }

            .logo {
                width: 240px;
                height: 240px;
                display: flex;
                align-items: center;
                justify-content: center;
                animation: pulse 1.5s infinite ease-in-out;
                will-change: opacity;
            }

            @keyframes pulse {
                0% {
                    opacity: 0.3;
                }
                50% {
                    opacity: 1;
                }
                100% {
                    opacity: 0.3;
                }
            }

            /* 辅助动画：发光效果 */
            .logo svg {
                filter: drop-shadow(0 0 12px rgba(81, 10, 252, 0.2));
                transition: filter 0.3s ease;
            }

            @media (prefers-color-scheme: dark) {
                .logo svg {
                    filter: drop-shadow(0 0 12px rgba(81, 10, 252, 0.35));
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .logo {
                    animation: none;
                }
            }
        </style>
    </head>
    <body>
        <div id="nuxt-spa-loading">
            <div class="loader-box">
                <div class="logo">
                    <img style="height: 48px" src="/spa-loading.svg" />
                </div>
            </div>
        </div>
    </body>
</html>
